<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:500px;"></div>
<script type="text/javascript">
    let companyList = [];
    let appNum = [];
    let typeNum = [];
    let scoreNum = [];

    $.ajax({
        url: "/getAppCompanyList",         //设置数据访问接口
        method:"PUT",
        dataType:"json",
        async: false,
        success: function (data) {
            for (let i = 0; i < data.length; i++){
                companyList.push(data[i].name);
                appNum.push(data[i].value);
                typeNum.push(data[i].type);
                scoreNum.push(data[i].score);
            }
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });
    console.log("获取所有的标题"+companyList);

    // 基于准备好的dom，初始化echarts实例
    var CompanyListChart = echarts.init(document.getElementById('main'));

    var CompanyListOption = {
        tooltip: {
            trigger: 'axis',
            formatter: function(params, ticket, callback) {
                var res = params[0].name;

                for (var i = 0, l = params.length; i < l; i++) {
                    if (params[i].seriesType === 'line') {
                        res += '<br/>' + params[i].seriesName + ' : ' +
                            (params[i].value ? params[i].value : '-') + '分';
                    } else {
                        res += '<br/>' + params[i].seriesName + ' : ' +
                            (params[i].value ? params[i].value : '-') + '个';
                    }
                }
                return res;
            }
        },
        grid: {
            containLabel: true
        },
        legend: {
            data: ['评分', '应用个数', '类别个数']
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: companyList
        }],
        dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }, {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }, {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }, {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }],
        yAxis: [{
            type: 'value',
            name: '评分',
            min: 0,
            position: 'left',
            axisLabel: {
                formatter: '{value} 分'
            }
        }, {
            type: 'value',
            name: '个数',
            min: 0,
            position: 'right',
            axisLabel: {
                formatter: '{value} 个'
            }
        }],
        series: [{
            name: '评分',
            type: 'line',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                }
            },
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
            data: scoreNum
        }, {
            name: '应用个数',
            type: 'bar',
            yAxisIndex: 1,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data: appNum
        }, {
            name: '类别个数',
            type: 'bar',
            yAxisIndex: 1,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data: typeNum
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    CompanyListChart.setOption(CompanyListOption);
</script>
</body>
</html>